<template>
  <div>
    <a-card>
      <a-space>
        <a-input
          v-model:value="listQuery.userId"
          placeholder="输入工号搜索"
          allow-clear
          @keyup.enter="handleFilter"
        />
        <a-select
          v-model:value="listQuery.type"
          allow-clear
          :options="types"
          placeholder="请假类型"
          style="width: 100px"
          @change="handleFilter"
        />
        <a-select
          v-model:value="listQuery.status"
          allow-clear
          :options="[
            { label: '待审批', value: StatusEnum.PROCESSING },
            { label: '已通过', value: StatusEnum.PASSED },
            { label: '未通过', value: StatusEnum.PASSED },
          ]"
          placeholder="审批状态"
          style="width: 100px"
          @change="handleFilter"
        />
        <a-button type="primary" :icon="h(SearchOutlined)" @click="handleFilter">搜索</a-button>
      </a-space>
    </a-card>
    <a-card class="mt-2">
      <a-table
        bordered
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :loading="tableLoading"
        :row-key="(row) => row.absenceId + ''"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status === StatusEnum.PASSED" color="success">
              <template #icon>
                <check-circle-outlined />
              </template>
              已通过
            </a-tag>
            <a-tag v-else-if="record.status === StatusEnum.DENIED" color="error">
              <template #icon>
                <close-circle-outlined />
              </template>
              未通过
            </a-tag>
            <a-tag v-else color="processing">
              <template #icon>
                <sync-outlined :spin="true" />
              </template>
              待审批
            </a-tag>
          </template>
          <template v-if="column.dataIndex === 'actions'">
            <a-button
              v-if="record.status !== StatusEnum.PASSED"
              size="small"
              type="link"
              @click="handleProcess(record, true)"
            >
              通过
            </a-button>
            <a-button
              v-if="record.status !== StatusEnum.DENIED"
              size="small"
              type="link"
              danger
              @click="handleProcess(record, false)"
            >
              拒绝
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { h, onMounted, reactive, ref } from 'vue';
  import AbsenceApi from '@/api/AbsenceApi';
  import {
    CheckCircleOutlined,
    CloseCircleOutlined,
    SearchOutlined,
    SyncOutlined,
  } from '@ant-design/icons-vue';
  import { message, Modal } from 'ant-design-vue';

  enum StatusEnum {
    PROCESSING = 'PROCESSING',
    PASSED = 'PASSED',
    DENIED = 'DENIED',
  }

  const types = [
    { label: '调休', value: '0' },
    { label: '年假', value: '1' },
    { label: '事假', value: '2' },
    { label: '病假', value: '3' },
    { label: '婚假', value: '4' },
    { label: '产假', value: '5' },
    { label: '陪产假', value: '6' },
    { label: '哺乳假', value: '7' },
    { label: '丧假', value: '8' },
  ];

  const columns = [
    { title: '工号', dataIndex: 'userId' },
    { title: '姓名', dataIndex: 'nickname' },
    { title: '请假类型', dataIndex: 'typeLabel' },
    { title: '说明', dataIndex: 'remark', ellipsis: true },
    { title: '状态', dataIndex: 'status', align: 'center' },
    { title: '开始时间', dataIndex: 'startTime', ellipsis: true },
    { title: '结束时间', dataIndex: 'endTime', ellipsis: true },
    {
      title: '操作',
      dataIndex: 'actions',
      align: 'center',
    },
  ];
  let data = ref([]);
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
    onChange: (current: number) => {
      pagination.current = current;
      getList();
    },
  });
  onMounted(() => {
    getList();
  });

  const listQuery = reactive<any>({});

  const tableLoading = ref(false);

  function getList() {
    tableLoading.value = true;
    AbsenceApi.page({ index: pagination.current, size: pagination.pageSize, ...listQuery })
      .then((res) => {
        data.value = res.data;
        pagination.total = res.total;
      })
      .finally(() => (tableLoading.value = false));
  }

  function handleFilter() {
    pagination.current = 1;
    getList();
  }

  function handleProcess(row, passed) {
    Modal.confirm({
      title: '提示',
      content: `确定${passed ? '通过' : '拒绝'}这条申请吗`,
      onOk: () => {
        AbsenceApi.update({ ...row, status: passed ? StatusEnum.PASSED : StatusEnum.DENIED }).then(
          () => {
            message.success('操作成功');
            getList();
          }
        );
      },
      onCancel: () => {},
    });
  }
</script>

<style scoped></style>
